<h2 class="list-title">设备清单与报价</h2>

<nz-tabset>
  <nz-tab nzTitle="{{series[0]}}">
    <div>
      <span class="table-title">一、世讯设备</span>
      <button nz-button (click)="showModal()" class="editable-add-btn">修改设备</button>
    </div>

    <nz-table #basicTable nzBordered [nzData]="sation_device">
      <thead>
      <tr>
        <th>设备名称</th>
        <th>型号</th>
        <th>品牌</th>
        <th>单位</th>
        <th>单价</th>
        <th nzWidth="8%">数量</th>
        <th>总价</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{data.name}}
        <td>{{data.product_model}}</td>
        <td>{{data.brand}}</td>
        <td>{{data.unit}}</td>
        <td>{{data.unit_price}}</td>
        <td>
          <nz-input-number [(ngModel)]="data.num" [nzMin]="1"  [nzStep]="1" (ngModelChange)="calculate_total()"  style="border: none" ></nz-input-number>
        </td>
        <td>{{data.total}}</td>
        <!--<td>-->
          <!--<a>Action 一 {{data.name}}</a>-->
          <!--<nz-divider nzType="vertical"></nz-divider>-->
          <!--<a>Delete</a>-->
        <!--</td>-->
      </tr>
      </tbody>
    </nz-table>
    <p class="totel-text">小计：{{sation_device_total }}元</p>

    <div>
      <span class="table-title">二、第三方产品</span>
      <button nz-button (click)="addRow()" class="editable-add-btn">添加设备</button>
    </div>

    <nz-table
      #editRowTable
      nzBordered
      [nzData]="other_device">
      <thead>
      <tr>
        <th>设备名称</th>
        <th>型号</th>
        <th >品牌</th>
        <th>单位</th>
        <th>单价</th>
        <th nzWidth="8%">数量</th>
        <th>总价</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of editRowTable.data">
        <td  >
          <div class="editable-cell">
            <div class="editable-cell-text-wrapper">
              <ng-container *ngIf="editCache[data.key].edit != 1">
                {{data.name}}
                <i nz-icon type="edit" class="editable-cell-icon" (click)="startEdit(data.key, 1)"></i>
              </ng-container>
              <ng-container *ngIf="editCache[data.key].edit == 1">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].name">
                <!--<i nz-icon type="check editable-cell-icon-check" (click)="finishEdit(data.key)"></i>-->
                <i nz-icon type="check" theme="outline" (click)="finishEdit(data.key ,'name')" class="finish-edit" ></i>
              </ng-container>
            </div>
          </div>
        </td>
        <td>
          <div class="editable-cell">
            <div class="editable-cell-text-wrapper">
              <ng-container *ngIf="editCache[data.key].edit != 2">
                {{data.product_model}}
                <i nz-icon type="edit" class="editable-cell-icon" (click)="startEdit(data.key, 2)"></i>
              </ng-container>
              <ng-container *ngIf="editCache[data.key].edit == 2">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].product_model">
                <!--<i nz-icon type="check editable-cell-icon-check" (click)="finishEdit(data.key)"></i>-->
                <i nz-icon type="check" theme="outline" (click)="finishEdit(data.key ,'product_model')" class="finish-edit" ></i>
              </ng-container>
            </div>
          </div>
        </td>
        <td>
          <div class="editable-cell">
            <div class="editable-cell-text-wrapper">
              <ng-container *ngIf="editCache[data.key].edit != 3">
                {{data.brand}}
                <i nz-icon type="edit" class="editable-cell-icon" (click)="startEdit(data.key, 3)"></i>
              </ng-container>
              <ng-container *ngIf="editCache[data.key].edit == 3">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].brand">
                <!--<i nz-icon type="check editable-cell-icon-check" (click)="finishEdit(data.key)"></i>-->
                <i nz-icon type="check" theme="outline" (click)="finishEdit(data.key ,'brand')" class="finish-edit" ></i>
              </ng-container>
            </div>
          </div>
        </td>
        <td>
          <div class="editable-cell">
            <div class="editable-cell-text-wrapper">
              <ng-container *ngIf="editCache[data.key].edit != 4">
                {{data.unit}}
                <i nz-icon type="edit" class="editable-cell-icon" (click)="startEdit(data.key, 4)"></i>
              </ng-container>
              <ng-container *ngIf="editCache[data.key].edit == 4">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].unit">
                <!--<i nz-icon type="check editable-cell-icon-check" (click)="finishEdit(data.key)"></i>-->
                <i nz-icon type="check" theme="outline" (click)="finishEdit(data.key ,'unit')" class="finish-edit" ></i>
              </ng-container>
            </div>
          </div>
        </td>
        <td>
          <div class="editable-cell">
            <div class="editable-cell-text-wrapper">
              <ng-container *ngIf="editCache[data.key].edit != 5">
                {{data.unit_price}}
                <i nz-icon type="edit" class="editable-cell-icon" (click)="startEdit(data.key, 5)"></i>
              </ng-container>
              <ng-container *ngIf="editCache[data.key].edit == 5">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].unit_price">
                <!--<i nz-icon type="check editable-cell-icon-check" (click)="finishEdit(data.key)"></i>-->
                <i nz-icon type="check" theme="outline" (click)="finishEdit(data.key ,'unit_price')" class="finish-edit" ></i>
              </ng-container>
            </div>
          </div>
        </td>
        <td >
          <nz-input-number [(ngModel)]="data.num" [nzMin]="1"  [nzStep]="1" (ngModelChange)="calculate_total()"  style="border: none" ></nz-input-number>
          <!--<div class="editable-cell">-->
            <!--<div class="editable-cell-text-wrapper">-->
              <!--<ng-container *ngIf="editCache[data.key].edit != 6">-->
                <!--{{data.num}}-->
                <!--<i nz-icon type="edit" class="editable-cell-icon" (click)="startEdit(data.key, 6)"></i>-->
              <!--</ng-container>-->
              <!--<ng-container *ngIf="editCache[data.key].edit == 6">-->
                <!--<input type="text" nz-input [(ngModel)]="editCache[data.key].num">-->
                <!--&lt;!&ndash;<i nz-icon type="check editable-cell-icon-check" (click)="finishEdit(data.key)"></i>&ndash;&gt;-->
                <!--<i nz-icon type="check" theme="outline" (click)="finishEdit(data.key ,'num')" class="finish-edit" ></i>-->
              <!--</ng-container>-->
            <!--</div>-->
          <!--</div>-->
        </td>
        <td>{{data.total}}</td>
        <td>
          <nz-popconfirm [nzTitle]="'Sure to delete?'" (nzOnConfirm)="deleteRow(data.key)">
            <a nz-popconfirm>Delete</a>
          </nz-popconfirm>
        </td>
      </tr>
      </tbody>
    </nz-table>
    <p class="totel-text">小计：{{other_device_total}}元</p>


    <div>
      <span class="table-title">三、辅材</span>
      <button nz-button (click)="add_assist()" class="editable-add-btn">添加辅材</button>
    </div>

    <nz-table
      #assistTable
      nzBordered
      [nzData]="assisted">
      <thead>
      <tr>
        <th>设备名称</th>
        <th>型号</th>
        <th>品牌</th>
        <th>单位</th>
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{assisted[0].name}}</td>
          <td>{{assisted[0].product_model}}</td>
          <td>{{assisted[0].brand}}</td>
          <td>{{assisted[0].unit}}</td>
          <td>{{assisted[0].unit_price}}</td>
          <td>{{assisted[0].num}}</td>
          <td>{{assisted[0].total}}</td>
          <td>delete</td>
        </tr>

      </tbody>
    </nz-table>

    <p class="totel-text">小计：{{assisted_total}}元</p>

    <div style="margin-top: 4rem">
      <p class="quote-price">
        总计：{{total_price}}元 <span style="margin-left: 8rem">折扣：</span>
        <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="100" [nzStep]="1" [nzFormatter]="formatterPercent" [nzParser]="parserPercent" (ngModelChange)="calculate_total()"></nz-input-number>
      </p>
      <p class="quote-price" style="color: #ff8800">
        折后报价：{{price_after_off}}元
        <button  nz-button nzType="primary" [nzSize]="size" style="float: right" (click)="export_excel()" ><i nz-icon type="download"></i>导出Excel文件</button>
      </p>
    </div>



  </nz-tab>
  <nz-tab nzTitle="{{series[1]}}">
    舒适版方案设备
  </nz-tab>
  <nz-tab nzTitle="{{series[2]}}">
    尊享版方案设备
  </nz-tab>
</nz-tabset>




<nz-modal [(nzVisible)]="isVisible" nzTitle="世讯设备列表" nzWidth="60%" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" >
  <nz-transfer
    [nzDataSource]="device_list"
    [nzTitles]="['世讯设备列表', '选中列表']"
    [nzListStyle]="{'width': '45%', 'height': '500px'}"
    (nzSelectChange)="select($event)"
    (nzChange)="change($event)">
  </nz-transfer>
</nz-modal>
